body {
    /* Using Inter font for modern aesthetics as per standard practice */
    font-family: 'Inter', Arial, sans-serif; 
    background-color: #f4f7f6;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px 20px;
    margin: 0;
    min-height: 100vh;
}

h1 {
    color: #333;
    font-size: 2rem;
    margin-bottom: 10px;
}

.instruction {
    color: #666;
    margin-bottom: 40px;
    font-style: italic;
}

/* Container for each alert wrapper (used to manage spacing) */
.alert-container {
    width: 90%;
    max-width: 600px;
    margin-bottom: 20px;
    /* Necessary for the collapse transition */
    max-height: 200px; 
    transition: max-height 0.4s ease-out, margin-bottom 0.4s ease-out;
}

/* --- BASE ALERT STYLES (Applies to all) --- */
.alert-box {
    border-radius: 8px;
    padding: 20px;
    position: relative;
    
    /* Initial state */
    opacity: 1;
    transform: translateY(0);
    
    /* Transitions for smooth fade-out/collapse */
    transition: opacity 0.4s ease-out, transform 0.4s ease-out, 
                height 0.4s ease-out, padding 0.4s ease-out;
    
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    border-left: 5px solid; 
    overflow: hidden; 
    min-height: 80px; 
}

.alert-title {
    margin-top: 0;
    font-size: 1.25rem;
    font-weight: 600;
}

.alert-message {
    margin-bottom: 0;
    line-height: 1.5;
}

/* The 'X' close button */
.alert-close {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    font-size: 1.5rem;
    cursor: pointer;
    text-decoration: none;
    line-height: 1;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.alert-close:hover {
    opacity: 1;
}

/* --- THEME COLORS --- */

/* SUCCESS (Green) */
.alert--success {
    background-color: #d4edda;
    color: #155724;
    border-left-color: #28a745;
}
.alert--success .alert-close { color: #155724; }

/* ERROR (Red) */
.alert--error {
    background-color: #f8d7da;
    color: #721c24;
    border-left-color: #dc3545;
}
.alert--error .alert-close { color: #721c24; }

/* WARNING (Yellow/Orange) */
.alert--warning {
    background-color: #fff3cd;
    color: #856404;
    border-left-color: #ffc107;
}
.alert--warning .alert-close { color: #856404; }

/* INFO (Blue) */
.alert--info {
    background-color: #d1ecf1;
    color: #0c5460;
    border-left-color: #17a2b8;
}
.alert--info .alert-close { color: #0c5460; }

/* SECONDARY (Gray/Neutral) */
.alert--secondary {
    background-color: #e2e3e5;
    color: #383d41;
    border-left-color: #6c757d;
}
.alert--secondary .alert-close { color: #383d41; }

/* LIGHT (Subtle/White) */
.alert--light {
    background-color: #fdfdfe;
    color: #818182;
    border-left-color: #f8f9fa; /* Very subtle light gray accent */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}
.alert--light .alert-close { color: #818182; }


/* --- THE PURE CSS MAGIC (DISMISSAL LOGIC) --- */

/* The checkbox is hidden in HTML. When checked, use the adjacent sibling selector (+)
   to target the alert-container and collapse it. */
.alert-toggle:checked + .alert-container {
    /* Collapse height, padding, and margin of the container */
    max-height: 0;
    margin-top: 0;
    margin-bottom: 0;
    padding: 0;
    /* Transition max-height and margin over time */
    transition: max-height 0.4s ease-out, margin-bottom 0.4s ease-out;
}

/* Hide the inner alert content (fade and slide up) */
.alert-toggle:checked + .alert-container .alert-box {
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    transform: translateY(-10px);
    /* Start fading slightly AFTER the container collapse starts */
    transition: opacity 0.3s ease-out 0.1s, transform 0.3s ease-out 0.1s, padding 0.3s ease-out 0.1s;
}
